<%@ page language="java" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	// 获得本项目的地址(例如: http://localhost:8080/MyApp/)赋值给basePath变量 
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<base href="<%=basePath %>" />
<head lang="en">
    <meta charset="UTF-8">
    <title>课程列表</title>
    <link href="css/list_style.css" rel="stylesheet" type="text/css" media="all"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href='css/playball.css' rel='stylesheet' type='text/css'>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="js/jquerySession.js"></script>
    <script type="text/javascript" src="js/list_script.js" charset="utf-8"></script>
</head>
<body>
<div class="content">
    <div class="header">
        <div class="header_icon">
            <img src="images/schoolLogo.png" alt="山东大学"/>
        </div>
        <div class="header_nav">
            <span class="title">课程管理系统</span>
            <div class="nav_search">
                <input id="search_input" type="text" class="textbox" placeholder="查找 课程/老师/上课地点">
                <button id="search_button" class="search_button"><span>查找</span></button>
            </div>
            <!-- nav_search 结束 -->
            <div class="nav">
                <ul>
                    <li><a href="#">登陆</a></li>
                    <li><a href="#">个人中心</a></li>
                </ul>
            </div>
            <!-- nav 结束 -->
        </div>
        <!-- header_nav 结束 -->
    </div>
    <div class="middle">
        <div class="content_left">
            <div class="filter">
                <div class="filter_title"><h1>筛选：</h1></div>
                <div class="filter_content">
                    <span>开设学院：</span>
                    <select id="course_filter_openedDep" title="开设学院" >
                        <option value="default">无限制</option>
                        <option value="软件">软件学院</option>
                        <option value="体育">体育学院</option>
                        <option value="管理">管理学院</option>
                        <option value="艺术">艺术学院</option>
                        <option value="历史文化">历史文化学院</option>
                        <option value="艺术">艺术学院</option>
                    </select>
                    <span>上课地点：</span>
                    <select id="course_filter_place">
                        <option value="default">无限制</option>
                        <option value="软件园">软件园校区</option>
                        <option value="中心">中心校区</option>
                        <option value="兴隆山">兴隆山校区</option>
                        <option value="洪家楼">洪家楼校区</option>
                        <option value="千佛山">千佛山校区</option>
                        <option value="趵突泉">趵突泉校区</option>
                        <option value="青岛">青岛校区</option>
                    </select>
                    <span>上课班级：</span>
                    <select id="course_filter_clazz">
                        <option value="default">无限制</option>
                        <option value="计软14.1">计软14.1</option>
                        <option value="计软14.2">计软14.2</option>
                        <option value="计软14.3">计软14.3</option>
                        <option value="计软14.4">计软14.4</option>
                        <option value="计软14.5">计软14.5</option>
                        <option value="计软14.6">计软14.6</option>
                        <option value="计软14.7">计软14.7</option>
                        <option value="计软14.8">计软14.8</option>
                    </select>
                    <span>课程属性：</span>
                    <select id="course_filter_nature">
                        <option value="default">无限制</option>
                        <option value="必修">必修</option>
                        <option value="任选">任选</option>
                        <option value="限选">限选</option>
                    </select>
                    <button id="filter_button">搜索</button>
                </div>
            </div>
            <!-- filter 结束 -->
            <div class="course_list">
                <div class="course_title"><h1>课程列表</h1></div>
                <div class="course_list_content" id="course_list_content">
                    <div class="gird_1_of_3">
                        <div class="img">
                            <img src="images/pic1.jpg" alt="pic1"/>
                        </div>
                        <!-- img 结束 -->
                        <div class="desc">
                            <div class="title">高等数学</div>
                            <!-- title 结束 -->
                            <div class="brief">
                                <ul>
                                    <li><span class="a">老师：</span><span class="b">宫献军</span></li>
                                    <li><span class="a">老师：</span><span class="b">宫献军</span></li>
                                    <li><span class="a">老师：</span><span class="b">宫献军</span></li>
                                    <li><span class="a">老师：</span><span class="b">宫献军</span></li>
                                </ul>
                                <div class="imp">
                                    <span class="a">已报人数：</span><span class="b">140</span>
                                </div>
                            </div>
                            <!-- brief 结束 -->
                        </div>
                        <!-- desc 结束 -->
                        <div class="button">
                            <button class="course_detail_button"><a href="static/course.html?id=1">详情</a></button>
                            <button class="course_select_button"><a href="#">选择该课程</a></button>
                        </div>
                        <!-- button 结束 -->
                    </div>
                    <!-- gird_1_of_3 结束 -->
                    <div class="gird_1_of_3">
                    <div class="img">
                        <img src="images/pic1.jpg" alt="pic1"/>
                    </div>
                    <!-- img 结束 -->
                    <div class="desc">
                        <div class="title">高等数学</div>
                        <!-- title 结束 -->
                        <div class="brief">
                            <ul>
                                <li><span class="a">老师：</span><span class="b">宫献军</span></li>
                                <li><span class="a">老师：</span><span class="b">宫献军</span></li>
                                <li><span class="a">老师：</span><span class="b">宫献军</span></li>
                                <li><span class="a">老师：</span><span class="b">宫献军</span></li>
                            </ul>
                            <div class="imp">
                                <span class="a">已报人数：</span><span class="b">140</span>
                            </div>
                        </div>
                        <!-- brief 结束 -->
                    </div>
                    <!-- desc 结束 -->
                    <div class="button">
                        <button class="course_detail_button"><span>详情</span></button>
                        <button class="course_select_button"><span>选择该课程</span></button>
                    </div>
                    <!-- button 结束 -->
                </div>
                    <!-- gird_1_of_3 结束 -->
                </div>
                <!-- course_list_content 结束 -->
            </div>
            <div class="clear"></div>
            <!-- course_list 结束 -->
            <div class="paging">
                <ul>
                    <li><a href="javascript:void(0);" target="_parent" onclick="javascript:paging_up_down(-12);" >上一页</a></li>
                    <li><a href="javascript:void(0);" target="_parent" onclick="javascript:getAllCourse(0);" >1</a></li>
                    <li><a href="javascript:void(0);" target="_parent" onclick="javascript:getAllCourse(12);" >2</a></li>
                    <li><a href="javascript:void(0);" target="_parent" onclick="javascript:getAllCourse(12*2);" >3</a></li>
                    <li><a href="javascript:void(0);" target="_parent" onclick="javascript:getAllCourse(12*3);" >4</a></li>
                    <li><a href="javascript:void(0);" target="_parent">...</a></li>
                    <li><a href="javascript:void(0);" target="_parent" onclick="javascript:paging_up_down(12);" >下一页</a></li>
                </ul>
            </div>
            <!-- paging 结束 -->
        </div>
        <!-- content_left 结束 -->
        <div class="content_right">
            <div class="note">
                <h1>Note:</h1>
                <p><span>Hello </span><span class="key" id="key_name" ></span><span>~</span></p>
                <p><span>您已选择了</span><span class="key" id="key_courseNumber" ></span><span>门课程</span></p>
                <p><span>共计</span><span class="key" id="key_credit"></span><span>学分</span></p>
            </div>
            <div class="choosed_course">
                <div class="title"><h1>已选课程</h1></div>
                <ul id="choosed_course_list">
                    <li><a href="#">高等数学</a></li>
                    <li><a href="#">高等数学高等数学高等数学高等数学</a></li>
                    <li><a href="#">高等数学</a></li>
                </ul>
            </div>
        </div>
        <!-- content_right 结束 -->
    </div>
    <div class="clear"></div>
    <!-- middle 结束 -->
    <div class="footer">
        <div class="copyright">
            <p>Copyright &copy; 2016.Company name All rights reserved.</p>
            <p><a target="_blank" href="http://www.zhagzheguo.cn">Powered by Zhagzheguo</a></p>
        </div>
    </div>
    <!-- footer 结束 -->
</div>
<script type="text/template" id="courseTemplate">
    <div class="gird_1_of_3">
        <div class="img">
            <img src="\${icon}" alt="pic1"/>
        </div>
        <!-- img 结束 -->
        <div class="desc">
            <div class="title">\${name}</div>
            <!-- title 结束 -->
            <div class="brief">
                <ul>
                    <li><span class="a">老师：</span><span class="b">\${teacher1.name}</span></li>
                    <li><span class="a">学分：</span><span class="b">\${credit}</span></li>
                    <li><span class="a">课程属性：</span><span class="b">\${nature}</span></li>
                    <li><span class="a">课堂容量：</span><span class="b">\${capacity}</span></li>
                    <li><span class="a">上课地点：</span><span class="b">\${place}</span></li>
                </ul>
                <div class="imp">
                    <span class="a">已报人数：</span><span class="b">\${enrolledNumber}</span>
                </div>
            </div>
            <!-- brief 结束 -->
        </div>
        <!-- desc 结束 -->
        <div class="button">
            <button class="course_detail_button"><a href="static/course.html?course_id=\${id}"><span>详情</span></a></button>
            <button class="course_select_button" value="\${id}"><span>选择该课程</span></button>
        </div>
        <!-- button 结束 -->
    </div>
    <!-- gird_1_of_3 结束 -->
</script>
</body>
</html>